<template>
    <div class="deposit_bar">
        <img src="/assets/images/deposit1.png" alt="" />
        <div class="deposit_bar__content">公告：未满18岁的未成年人请勿消费</div>
    </div>
    <div class="deposit_bar_large">
        <img src="/assets/images/deposit2.png" alt="" />
        <div class="deposit_bar_large__title">
            <span>账户余额：￥ {{ business.money }}</span>
        </div>
    </div>
    <div class="deposit_bar_large">
        <img src="/assets/images/deposit2.png" alt="" />
        <div class="deposit_bar_large__title">
            <span>用户：{{ business.nickname }}</span>
        </div>
    </div>

    <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
        >分割线</van-divider
    >

    <van-form class="form" @submit="OnPay">
        <van-field
            v-model="money"
            label="充值金额"
            name="money"
            placeholder="请填写充值金额"
            left-icon="gold-coin-o"
            required
            :rules="[{ required: true, message: '请填写充值金额' }]"
            @focus="NumberKeyboardShow = true"
        />

        <van-field
            v-model="pay.text"
            is-link
            readonly
            required
            name="pay"
            label="支付方式"
            placeholder="选择支付方式"
            left-icon="other-pay"
            @click="PayShow = true"
        />
        
        <van-popup v-model:show="PayShow" position="bottom">
            <van-picker
                :columns="PayList"
                @confirm="OnPayConfirm"
                @cancel="PayShow = false"
            />
        </van-popup>

        <div class="button">
            <van-button
                round
                block
                color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
                native-type="submit"
            >
                立即充值
            </van-button>
        </div>
    </van-form>

    <van-number-keyboard
        @input="PayInput"
        :show="NumberKeyboardShow"
        close-button-text="完成"
        @close="OnClose"
    />

    <Tabbar />
</template>

<script setup>
    const { proxy } = getCurrentInstance();

    const business = proxy.$business;
    const money = ref('');
    const NumberKeyboardShow = ref(false);
    const PayShow = ref(false);
    const PayList = ref([
        {text:'支付宝',value:'zfb'},
        {text:'微信',value:'wx'}
    ]);
    const pay = ref(PayList.value[0]);
    const PayInput = (values) => (money.value += values);

    const OnClose = () => 
    {
        NumberKeyboardShow.value = false;
    }

    const OnPayConfirm = ({selectedOptions}) => 
    {
        let option = selectedOptions[0] ?? '';

        if(!option)
        {
            return false;
        }

        pay.value = option;

        PayShow.value = false;
    }

    const OnPay = async () =>
    {
        if(!money.value.trim())
        {
            return false;
        }

        NumberKeyboardShow.value = false;

        proxy.$confirm({
            title:'充值',
            message:`是否确认充值 ${money.value} 元到该账户？`
        }).then(async () => {
            let params = {
                busid:business.value.id,
                money:money.value.trim(),
                type:pay.value.value
            }

            let result = await proxy.$http.post({
                url:'/business/pay',
                params
            })

            if(result.code === 1)
            {
                proxy.$router.push({path:'/business/cashier',query:{payid:result.data.id}});
                console.log(result);
                
            }else
            {
                proxy.$fail(result.msg);
            }
        }).catch((err) => {});
    }
</script>

<style scoped>
    @import url('/assets/css/BusinessPay.css');
</style>
